package com.midele.goodstuff.ui

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.pager.PagerState
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.compositionLocalOf
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.navigation.NavHostController
import androidx.navigation.compose.rememberNavController
import com.midele.goodstuff.R
import com.midele.goodstuff.data.model.MainNaveDestination
import com.midele.goodstuff.navigation.MidNavHost
import com.midele.goodstuff.navigation.publishActivity
import com.midele.goodstuff.ui.main.MainActivityIntent
import com.midele.goodstuff.ui.main.MainActivityState
import com.midele.goodstuff.viewmodel.MainViewModel
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.launch


@Composable
fun MidApp(mainViewModel: MainViewModel) {

    val navController = rememberNavController()

    MidAppScreen(mainViewModel,navController)



}

@Composable
private fun MidAppScreen(mainViewModel: MainViewModel,navController: NavHostController){
    val scope = rememberCoroutineScope()
    val pageState = rememberPagerState(
        initialPage = 0,
        initialPageOffsetFraction = 0f,
    ) { 4 }

    val viewStates = mainViewModel.viewStates

    navController.addOnDestinationChangedListener { _, destination, _ ->
        when (destination.route) {
            "app_index" -> {
                mainViewModel.sendIntent(MainActivityIntent.SetShowBottomBar(true))
            }
            else -> mainViewModel.sendIntent(MainActivityIntent.SetShowBottomBar(false))
        }
    }

    Scaffold(
        modifier = Modifier.fillMaxWidth().navigationBarsPadding(),
        contentWindowInsets = WindowInsets(0),
        bottomBar = {
            MainBottomAppBar(navController, mainViewModel,pageState,viewStates,scope)
        }
    ) { contentPadding ->
        Row(modifier = Modifier.padding(contentPadding)) {
            MainContent(navController,pageState,contentPadding)
        }
    }
}

@Composable
fun MainContent(navController: NavHostController,pageState: PagerState,contentPadding: PaddingValues) {
    MidNavHost(
        navController = navController,
        pageState = pageState,
        modifier = Modifier.padding(contentPadding).fillMaxSize()
    )

}

@Composable
fun MainBottomAppBar(navController: NavHostController, mainViewModel: MainViewModel,pageState: PagerState,viewStates: MainActivityState,scope: CoroutineScope) {

    Column {
        AnimatedVisibility(viewStates.isShowBottomBar) {
            ConstraintLayout(
                modifier = Modifier
                    .height(64.dp)
                    .fillMaxWidth()
                    .background(Color.Transparent)
            ) {
                // Create references for the composables to constrain
                val (mainButtonColumn, mRow) = createRefs()

                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .background(Color.Black)
                        .padding(start = 24.dp, end = 24.dp)
                        .constrainAs(mRow) {
                            bottom.linkTo(parent.bottom)
                            start.linkTo(parent.start)
                            end.linkTo(parent.end)
                        }, horizontalArrangement = Arrangement.SpaceBetween
                ) {
                    Column(horizontalAlignment = Alignment.CenterHorizontally) {
                        Image(
                            modifier = Modifier
                                .width(28.dp)
                                .height(28.dp)
                                .clickable {
                                    mainViewModel.sendIntent(
                                        MainActivityIntent.SelectNavItem(
                                            0,
                                        ),
                                    )
                                    scope.launch { pageState.scrollToPage(0) }
                                },
                            painter = painterResource(id = if (viewStates.navItemIndex == 0) R.mipmap.ic_main_tab_explore_sel else R.mipmap.ic_main_tab_explore_unsel),
                            contentDescription = null,
                        )
                        Text("探索", color = Color.White, fontSize = 10.sp, textAlign = TextAlign.Center)
                    }
                    Column(horizontalAlignment = Alignment.CenterHorizontally) {
                        Image(
                            modifier = Modifier
                                .width(28.dp)
                                .height(28.dp)
                                .clickable {
                                    mainViewModel.sendIntent(
                                        MainActivityIntent.SelectNavItem(
                                            1,
                                        ),
                                    )
                                    scope.launch { pageState.scrollToPage(1) }
                                },
                            painter = painterResource(id = if (viewStates.navItemIndex == 1) R.mipmap.ic_main_tab_record_sel else R.mipmap.ic_main_tab_record_unsel),
                            contentDescription = null
                        )
                        Text("权属登记", color = Color.White, fontSize = 10.sp)
                    }
                    Box(modifier = Modifier
                        .width(28.dp)
                        .height(42.dp))
                    Column(horizontalAlignment = Alignment.CenterHorizontally) {
                        Image(
                            modifier = Modifier
                                .width(28.dp)
                                .height(28.dp)
                                .clickable {
                                    mainViewModel.sendIntent(
                                        MainActivityIntent.SelectNavItem(
                                            2,
                                        ),
                                    )
                                    scope.launch { pageState.scrollToPage(2) }
                                },
                            painter = painterResource(id = if (viewStates.navItemIndex == 2) R.mipmap.ic_main_tab_message_sel else R.mipmap.ic_main_tab_message_unsel),
                            contentDescription = null,
                        )
                        Text("消息", color = Color.White, fontSize = 10.sp)
                    }
                    Column(horizontalAlignment = Alignment.CenterHorizontally) {
                        Image(
                            modifier = Modifier
                                .width(28.dp)
                                .height(28.dp)
                                .clickable {
                                    mainViewModel.sendIntent(
                                        MainActivityIntent.SelectNavItem(
                                            3,
                                        ),
                                    )
                                    scope.launch { pageState.scrollToPage(3) }
                                },
                            painter = painterResource(id = if (viewStates.navItemIndex == 3) R.mipmap.ic_main_tab_mine_sel else R.mipmap.ic_main_tab_mine_unsel),
                            contentDescription = null
                        )
                        Text("我的", color = Color.White, fontSize = 10.sp)
                    }
                }

                Column(modifier = Modifier.constrainAs(mainButtonColumn) {
                    bottom.linkTo(parent.bottom, margin = 11.dp)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                }, horizontalAlignment = Alignment.CenterHorizontally) {
                    Image(
                        modifier = Modifier
                            .width(44.dp)
                            .height(44.dp)
                            .clickable {
                                navController.navigate(publishActivity)

                            },
                        painter = painterResource(id = R.mipmap.ic_main_tab_publish),
                        contentDescription = null
                    )
                    Text("发布", color = Color.White, fontSize = 10.sp)
                }
            }
        }
    }



}